// 自定义主题色系（避免与 Nuxt UI 冲突）
$custom-primary: #F97516; // 用于高亮
$custom-secondary: #17253F; // 头、尾背景色
$custom-bgcolor: #F3F4F6;  // 主题内容背景色
$custom-link: #3B82F6; // 链接颜色
$custom-maxwidth: 1400px;
$custom-danger:red;

// 自定义中性色系
$custom-white: #ffffff;
$custom-black: #000000;
$custom-gray-50: #f9fafb;
$custom-gray-100: #f3f4f6;
$custom-gray-200: #e5e7eb;
$custom-gray-300: #d1d5db;
$custom-gray-400: #9ca3af;
$custom-gray-500: #6b7280;
$custom-gray-600: #4b5563;
$custom-gray-700: #374151;
$custom-gray-800: #1f2937;
$custom-gray-900: #111827;

// 自定义文本颜色
$custom-text-primary: #111827;
$custom-text-secondary: #6b7280;
$custom-text-muted: #9ca3af;
$custom-text-inverse: #ffffff;

// 自定义背景色
$custom-bg-primary: #ffffff;
$custom-bg-secondary: #f9fafb;
$custom-bg-muted: #f3f4f6;
$custom-bg-dark: #111827;

// 自定义字体大小
$custom-font-xs: 0.75rem;    // 12px
$custom-font-sm: 0.875rem;   // 14px
$custom-font-base: 1rem;     // 16px
$custom-font-lg: 1.125rem;   // 18px
$custom-font-xl: 1.25rem;    // 20px
$custom-font-2xl: 1.5rem;    // 24px
$custom-font-3xl: 1.875rem;  // 30px
$custom-font-4xl: 2.25rem;   // 36px
$custom-font-5xl: 3rem;      // 48px
$custom-font-6xl: 3.75rem;   // 60px

// 自定义标题字体大小
$custom-heading-h1: $custom-font-5xl;
$custom-heading-h2: $custom-font-4xl;
$custom-heading-h3: $custom-font-3xl;
$custom-heading-h4: $custom-font-2xl;
$custom-heading-h5: $custom-font-xl;
$custom-heading-h6: $custom-font-lg;

// 自定义字体粗细
$custom-font-light: 300;
$custom-font-normal: 400;
$custom-font-medium: 500;
$custom-font-semibold: 600;
$custom-font-bold: 700;
$custom-font-extrabold: 800;

// 自定义行高
$custom-line-tight: 1.25;
$custom-line-normal: 1.5;
$custom-line-relaxed: 1.75;

// 自定义间距
$custom-spacing-xs: 0.25rem;   // 4px
$custom-spacing-sm: 0.5rem;    // 8px
$custom-spacing-md: 1rem;      // 16px
$custom-spacing-lg: 1.5rem;    // 24px
$custom-spacing-xl: 2rem;      // 32px
$custom-spacing-2xl: 3rem;     // 48px
$custom-spacing-3xl: 4rem;     // 64px

// 自定义边框半径
$custom-radius-none: 0;
$custom-radius-sm: 0.125rem;  // 2px
$custom-radius-md: 0.25rem;   // 4px
$custom-radius-lg: 0.5rem;    // 8px
$custom-radius-xl: 0.75rem;   // 12px
$custom-radius-2xl: 1rem;     // 16px
$custom-radius-full: 9999px;

// 自定义阴影
$custom-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
$custom-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
$custom-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
$custom-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

// 自定义过渡动画
$custom-transition-fast: 150ms ease-in-out;
$custom-transition-normal: 300ms ease-in-out;
$custom-transition-slow: 500ms ease-in-out;

// 自定义断点（与 UnoCSS 保持一致）
$custom-breakpoint-xs: 320px;
$custom-breakpoint-sm: 640px;
$custom-breakpoint-md: 768px;
$custom-breakpoint-lg: 1024px;
$custom-breakpoint-xl: 1280px;

// 兼容性变量（保持向后兼容）

.primary-color {
  color: $custom-primary;
}

.cus-container {
  max-width: 1400px;
  margin: 0 auto;
  min-height: 600px;
}

// 表格默认样式
table {
  width: 100%;
  border-collapse: collapse;
  margin: $custom-spacing-lg 0;
  background-color: $custom-bg-primary;
  border-radius: $custom-radius-lg;
  overflow: hidden;
  box-shadow: $custom-shadow-sm;
  
  // 外框边框
  border: 1px solid $custom-gray-200;
}

tbody {
  background-color: $custom-bg-primary;
}

tr {
  border-bottom: 1px solid $custom-gray-200;
  transition: background-color $custom-transition-fast;
  
  &:hover {
    background-color: $custom-gray-50;
  }
  
  &:last-child {
    border-bottom: none;
  }
}

th {
  background-color: $custom-gray-100;
  color: $custom-text-primary;
  font-weight: $custom-font-semibold;
  font-size: $custom-font-sm;
  text-align: left;
  padding: $custom-spacing-md $custom-spacing-lg;
  border-right: 1px solid $custom-gray-200;
  border-bottom: 2px solid $custom-gray-300;
  
  &:last-child {
    border-right: none;
  }
}

td {
  padding: $custom-spacing-md $custom-spacing-lg;
  color: $custom-text-primary;
  font-size: $custom-font-sm;
  line-height: $custom-line-normal;
  border-right: 1px solid $custom-gray-200;
  
  &:last-child {
    border-right: none;
  }
}

